<template>
  <div class="CustomManagement">
    <!-- 返回栏 -->
    <el-row>
      <el-col :span="3" class="back">
        <el-button type="primary" plain @click="showCreate">新增算法</el-button>
        <AlgorithmCreate />
      </el-col>
      <el-col :span="19" class="back"> </el-col>
      <!-- 按钮 -->
      <el-col :span="2" class="back">
        <el-button
          type="warning"
          plain
          @click="this.$router.push({ name: 'AlgorithmStore' })"
          >关闭</el-button
        >
      </el-col>
    </el-row>
    <div class="table-div">
      <el-table
        :data="listDate"
        style="width: 100%"
        border
        stripe
        height="100%"
        :scrollbar-always-on="true"
      >
        <el-table-column
          fixed
          prop="alsName"
          label="算法名称"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="alsIntro"
          label="算法介绍"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="alsScene"
          label="适用场景"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="alsParam"
          label="算法参数"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"
          header-align="center"
          align="center"
          width="180px"
        ></el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="180px">
          <template #default="scope">
            <el-button
              type="warning"
              plain
              @click="editList(scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              plain
              @click="delList(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageLimit.pageIndex"
      v-model:page-size="pageLimit.pageRow"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageLimit.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { customData, customDel } from "@/services/algorithm";
import { onMounted, toRefs, ref, reactive, provide } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AlgorithmCreate from "@/views/algorithm/createView/AlgorithmCreate";
const data = reactive({
  listDate: [], //存表格数据
  pageLimit: {
    pageIndex: 1,
    pageRow: 10,
    totalCount: 0,
  }, // 分页对象
});
const { pageLimit, listDate } = toRefs(data); //输入定义的数据

const showCreateDialog = ref(false); // 新增算法弹窗
const title = ref(""); //算法标题
const rower = ref({}); //内容回显
const flagAge = ref(null); //上传算法包状态
const showCreate = () => {
  showCreateDialog.value = true;
  rower.value = {};
  title.value = "新增算法";
  flagAge.value = true;
};
//渲染 provide依赖注入传       //弹框状态    数据    标题   按钮的状态
provide("showCreateDialog", {
  showCreateDialog,
  rower,
  title,
  flagAge,
});

//调用渲染数据
const customList = async () => {
  // console.log(444);
  const respData = await customData({ pageLimit: pageLimit.value });
  if (respData?.respCode == 200) {
    listDate.value = respData.respData.dataList;
    pageLimit.value = respData.respData.pageLimit;
  }
};
//传递方法
provide("customList", customList);
//删除
const delList = (id) => {
  ElMessageBox.confirm("是否要删除", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const respData = await customDel({ alsID: id.alsID });
      if (respData?.respCode == 200) {
        ElMessage({
          message: respData.respMessage,
          type: "success",
        });
        customList();
      }
    })
    .catch(() => {});
};
//编辑回显
const editList = (row) => {
  //编辑是provide传递
  showCreateDialog.value = true;
  // console.log(row);//父组件传
  title.value = "编辑算法";
  flagAge.value = false;
  rower.value = Object.assign(row, { _t: new Date().getTime() });
  // console.log(rower.value);
};
//分页
const handleSizeChange = () => {
  customList();
};
const handleCurrentChange = () => {
  customList();
};
//挂载
onMounted(() => {
  customList();
});
</script>

<style scoped lang="scss">
.CustomManagement {
  width: 100%;
  height: 100%;
  .el-row {
    width: 100%;
    height: 50px;
  }
  .back {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .el-button {
      cursor: pointer;
    }
  }
  .table-div {
    width: 100%;
    height: calc(100% - 110px);
    overflow: auto;
    box-sizing: border-box;
  }
  .el-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    box-sizing: border-box;
  }
  :deep(.cell) {
    box-sizing: border-box;
  }
}
</style>